<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.title" placeholder="专题名" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter"/>

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>

      <router-link :to="'/theme/create'">
        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">
          新增
        </el-button>
      </router-link>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="图片" align="center" min-width="150px">
        <template slot-scope="{row}">
          <img :src="row.picUrl" width="250px" height="100px">
        </template>
      </el-table-column>

      <el-table-column label="专题名" align="center" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column label="模板编号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.template }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" min-width="150px">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusStyle">
            {{ row.isEnable | statusFilter }}
          </el-tag>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <router-link :to="'/theme/edit/'+row.id">
            <el-button size="small" icon="el-icon-edit" circle>

            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.curPageNum" :limit.sync="listQuery.pageSize"
                @pagination="getList"/>


  </div>
</template>

<script>
  import {getList} from '@/api/theme'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination

  export default {
    name: 'Manager',
    components: {Pagination},
    directives: {waves},
    filters: {
      statusStyle(status) {
        const statusStyleMap = {
          '1': 'success',
          '2': 'info'
          // 3: 'danger'
        }
        return statusStyleMap[status]
      },
      statusFilter(status) {
        const statusMap = {
          true: '上线中',
          false: '已下线'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          curPageNum: 1,
          pageSize: 10,
          title: undefined
        },
        defaultForm: {
          id: undefined,
          name: '',
          avatar: '',
          roles: null
        },

        dialogStatus: '',
        //检验规则
        rules: {
          type: [{required: true, message: 'type is required', trigger: 'change'}],
          timestamp: [{type: 'date', required: true, message: 'timestamp is required', trigger: 'change'}],
          title: [{required: true, message: 'title is required', trigger: 'blur'}]
        },
        downloadLoading: false
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        getList(this.listQuery).then(r1 => {
          console.log("专题数据",r1)
          this.list = r1.data.list
          this.total = r1.data.total
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleDelete(row) {

        this.$confirm('确定要删除该管理员?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await deleteManager(row.id)
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
          .catch(err => {
            console.error(err)
          })

      },
      handleAdd() {
        this.dialogTitle = '新增'
        this.dialogVisible = true
        this.isEdit = false
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
        //新增重置为空
        this.checkboxGroup = []
        this.defaultForm = {
          id: undefined,
          name: '',
          avatar: '',
          roles: null
        }

      },
      handleEdit(row) {
        this.isEdit = true
        this.dialogTitle = '编辑'
        this.defaultForm = Object.assign({}, row)
        let roleIds = this.defaultForm.roles.map(function (item) {
          return item['id']
        });
        this.checkboxGroup = roleIds
        this.defaultForm.roles = this.checkboxGroup
        this.dialogVisible = true
      },
      handleAvatarSuccess(e) {
        this.defaultForm.avatar = e.data.url
      },
      changeCheckBox(e) {
        this.defaultForm.roles = this.checkboxGroup
      },
      getRoles() {
        getRoles().then(r1 => {
          this.roleList = r1.data
        })
      },
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const postForm = Object.assign({}, this.defaultForm)
            console.log("更新数据", postForm)
            updateManager(postForm).then(() => {
              //重新获取表数据
              this.getList()
              this.dialogVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },

      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            saveManager(this.defaultForm).then(() => {
              this.getList()
              this.dialogVisible = false
              this.$notify({
                title: '成功',
                message: '新增成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },

      cancelDialog() {
        //取消
        this.dialogVisible = false;
        // this.row.roleList = this.tempRole

      }
    }
  }
</script>

<style lang="scss" scoped>
  /*图片*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    border: 1px solid #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    border: 1px solid #d9d9d9;
    width: 178px;
    height: 178px;
    display: block;
  }

  .tag {
    margin-left: 5px;
  }
</style>
